@import 'colors';
@import 'mixins';

$height: 315px;

.slideshow-container {
    width:100%;
    height:50 + $height;
    overflow:hidden;
    position:relative;
    margin:20px 0;

    ul.slideshow {
        list-style:none;
        height:$height;
        width:100%;
        overflow:hidden;

        li {
            float:left;
            width:800px;
            height:$height;
            text-align:center;
            overflow:hidden;
            position:relative;

            h1 {
                position:absolute;
                z-index:1;
                right:10px;
                bottom:10px;
                padding:10px 20px;
                background:rgba(white, 0.75);
                color:$blue-light;
                @include box-shadow(0, 0, 7px, rgba($grey,0.5));
            }

            img {
                height:315px;
            }
        }
    }

    ul.indicator {
        position:absolute;
        width:100%;
        text-align:center;
        bottom:0;
        left:0;
        list-style:none;

        li {
            display:inline-block;
            cursor:pointer;
            width:12px;
            height:12px;
            @include border-radius(6px);
            border:1px solid rgba($grey, 0.5);
            text-indent: -100em;
            overflow:hidden;
            margin:0 2px;
            position:relative;

            &.selected:before, &:hover:before, &.selected:hover:before {
                content: "s";
                position:absolute;
                width:8px;
                height:8px;
                @include border-radius(4px);
                background:$blue-light;
                left:2px;
                top:2px;
            }
            &:hover:before {
                background:$grey
            }
        }
    }

}